<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			background: #fff url(./bg.jpg) 0 0 no-repeat;
			background-size: cover;
			overflow: hidden;
		}
		img{
			position: absolute;
			top: 0px;
			left: 0px;
		}

	</style>
	<script>
		
		window.onload = function(){

			body = document.getElementsByTagName('body');


			snowList = [];


			function addSnow(num){

				for (var i = 0; i <= num; i++) {
					creatSnow();
				}

				console.log(snowList)

			}


			function creatSnow(){
				snow = document.createElement("img");
				snow.src = "./snow.png";
				size = Math.floor(Math.random()*10+5);
				snow.style.width = size+"px";
				snow.style.height = size+"px";
				snow.style.top = Math.floor(Math.random()*650)+"px";
				snow.style.left = Math.floor(Math.random()*1024)+"px";
				snowList.push(snow);
				body[0].appendChild(snow);
			}

			addSnow(150);


			function run(){

				for (var i = 0; i < snowList.length; i++) {
					t = parseInt(snowList[i].style.top);

					if(t>650){
						t = 0;
					}else{
						t+= 1;
					}

					snowList[i].style.top = t+'px';
				}
			}

			setInterval(run,8);

		}

	</script>
</head>
<body>

</body>
</html>